<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.goodsType" placeholder="商品类型" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Search" @click="handleParent">父类型</el-button>
				<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
			</div>
			<!-- :data 绑定的是需要渲染的数据列表 -->
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="typeId" label="ID" width="240" align="center"></el-table-column>
				<el-table-column prop="parentId" label="父级类型ID" width="240" align="center"></el-table-column>
				<el-table-column prop="parentType" label="父级类型" width="240" align="center"></el-table-column>
				<el-table-column prop="goodsType" label="商品类型"></el-table-column>
				<el-table-column prop="delFlag" label="删除标志（0为正常1为已删除）"></el-table-column>
				<el-table-column prop="updateTime" label="更新时间"></el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<!-- <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button> -->
						<el-button text :icon="Delete" class="red" style="color: black ; background-color: lightseagreen;"
							@click="handleDelete(scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>


			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<div>
			<!-- 编辑弹出框 -->
			<el-dialog title="新增" v-model="addVisible" width="30%">
				<el-form label-width="70px">
					<el-form-item label="父类型ID">
						<el-input v-model="form.parentId"></el-input>
					</el-form-item>
					<el-form-item label="父级类型">
						<el-input v-model="form.parentType"></el-input>
					</el-form-item>
					<el-form-item label="商品类型">
						<el-input v-model="form.goodsType"></el-input>
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="addVisible = false">取 消</el-button>
						<el-button type="primary" @click="saveEdit">确 定</el-button>
					</span>
				</template>
			</el-dialog>
		</div>

		<!-- 父类型查询 -->
		<el-dialog title="父类型" v-model="Visible" width="50%">
			<el-table :data="Data" table-width="70px">
				<el-table-column prop="typeId" label="ID"></el-table-column>
				<el-table-column prop="parentId" label="父级类型ID"></el-table-column>
				<el-table-column prop="goodsType" label="商品类型"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus, List } from '@element-plus/icons-vue';
import { fetchData } from '../api/index';
import http from '../utils/request'

interface TableItem {
	typeId: number;
	parentId: number;
	goodsType: string;
	parentType:string;
	updateTime: string;

}

interface ParentItem {
	typeId: number;
	parentId: number;
	goodsType: string;
	parentType:string;

}

const query = reactive({
	parentId: '',
	goodsType: '',
	parentType:'',
	pageNum: 1,
	pageSize: 10
});
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	http.get("/admin/goodstypelist", {
		params: query
	}).then((res: any) => {
		console.log('获取商品类型信息 res = ', res.data);
		console.log('获取商品类型信息 qurey = ', query);
		tableData.value = res.data.data.list;
		pageTotal.value = res.data.data.total;	//

	}).catch((err: any) => {
		console.log('获取商品类型信息 res = ', err)
	})
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};


// 删除操作
const handleDelete = (row: any) => {
	// 二次确认删除
	ElMessageBox.confirm(`确定要删除【 ${row.goodsType} 】吗？`, '提示', {
		type: 'warning'
	})
		.then(() => {//用户点击确定按钮
			http.delete("/admin/goodstype/" + row.typeId)
				.then((res) => {
					console.log('删除返回值：', res);
					if (res.data.code === 200) {	//修改成功
						ElMessage.success(`删除成功`);
						getData();
					}
				}).catch((err) => {
					console.log('修改失败：', err);
					ElMessage.error(`修改失败`);
				});
		})
		.catch(() => {//点击取消按钮

		});
};

const parent = reactive({
	typeId:'',
	parentId: '',
	parentType:'',
	goodsType: ''

})
const Visible = ref(false);
// const dialogTitle1 = ref('父类型');
const Data = ref<ParentItem[]>([]);
const getparent = () => {
	dialogTitle.value = "父类型";
	http.get("/admin/goodstypelist/parent", {
		params: parent
	}).then((res: any) => {
		console.log("parent=", parent);
		console.log('获取商品父类型信息 parentType = ', res.data);
		Data.value = res.data.data.list;

	}).catch((err: any) => {
		console.log('获取商品类型信息 res = ', err)
	})
};
// getparent();
const handleParent = () => {
	dialogTitle.value = "父类型";
	getparent();
	Visible.value = true;
};

const handleChange = (parentId: any) => {
	console.log(parentId)
}
// 表格编辑时弹窗和保存
const dialogTitle = ref('');
const addVisible = ref(false);
let form = reactive({
	parentId: '',
	parentType:'',
	goodsType: '',
});
const handleAdd = () => {
	dialogTitle.value = "新增";
	form.parentId = '';
	form.goodsType = '';
	addVisible.value = true;
};
const saveEdit = () => {
	console.log('新增', form);
	http.post("/admin/goodstype", form)
		.then((res) => {
			console.log('新增返回值：', res);
			if (res.data.code === 200) {	//新增成功
				ElMessage.success(`新增成功`);
				addVisible.value = false;
				getData();
			}
		}).catch((err) => {
			console.log('新增失败：', err);
			ElMessage.error(`新增失败`);
		});
};


</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
